<template>
<com-main>
   <div slot="com_header">首页>商品管理>商品添加</div>
   <div slot="com_content">
    <div class="com_a">
         <i class="el-alert__icon el-icon-warning"></i>
         添加商品信息
    </div>
    <el-row>
        <el-steps :active="active" finish-status="success">
            <el-step title="基本信息"></el-step>
            <el-step title="商品参数"></el-step>
            <el-step title="商品属性"></el-step>
            <el-step title="商品图片"></el-step>
            <el-step title="商品内容"></el-step>
            <el-step title="完成"></el-step>
        </el-steps>
    </el-row>
    <el-row>
        <el-tabs tab-position="left"  v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="基本信息" name="0">
                <el-form :model="searchobj" status-icon  ref="ruleForm"  class="demo-ruleForm" style="height: 700px;">
                    <el-form-item label="商品名称" >
                           <br> <el-input type="text" v-model="searchobj.goods_name" style="width:800px"></el-input>
                    </el-form-item>
                <el-form-item label="商品价格" >
                    <br><el-input-number v-model="searchobj.goods_price" controls-position="right"style="width:800px" @change="handleChange"></el-input-number>
                </el-form-item>
                <el-form-item label="商品重量">
                       <br><el-input-number v-model="searchobj.goods_weighte" controls-position="right"style="width:800px" @change="handleChange"></el-input-number> 
                </el-form-item>
                <el-form-item label="商品数量">
                        <br><el-input-number v-model="searchobj.goods_number" controls-position="right"style="width:800px" @change="handleChange"></el-input-number> 
                </el-form-item>
                <el-form-item label="商品分类">
                        <br><el-cascader :options="options" :props="defaultobj"  v-model="id" @change="handleChange"></el-cascader>
                </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="商品参数" name="1"></el-tab-pane>
            <el-tab-pane label="商品属性" name="2"></el-tab-pane>
            <el-tab-pane label="商品图片" name="3">
                <el-upload
                    class="upload-demo"
                    action="http://127.0.0.1:8888/api/private/v1/"
                    :on-change="handleChangeimg"
                    :file-list="fileList">
                    <el-button size="small" type="primary">点击商品上传</el-button>
                        <div slot="tip" class="el-upload__tip">对文件要求的提示信息</div>
                </el-upload>
            </el-tab-pane>
            <el-tab-pane label="商品内容" name="4">
                <el-empty description="描述文字"></el-empty>
            </el-tab-pane>
            <!-- <el-tab-pane label="完成" name="5">完成</el-tab-pane> -->
        </el-tabs>
    </el-row>


   </div>
</com-main>
</template>
<script>
import ComMain from '../../components/commain.vue';
import {api_save,api_categories} from '../../api/goods'
export default {
     components:{
      ComMain
   },
   data() {
      return {
         num: 1,
         active: 0,
         activeName:'0',
         options:[],
         id:0,
         defaultobj:{
            expandTrigger:'hover',
            value:'cat_id',
            label:'cat_name',
            children:'children'
         },
         searchobj:{
            goods_name:'',                       //商品名称
            goods_cat:',',                       //以为','分割的分类列表
            goods_price:0,                       //价格
            goods_number:0,                       //数量
            goods_weight:0,                       //重量
            goods_introduce:'',                       //介绍
            pics:{},                       //上传的图片临时路径（对象）
            attrs:[]                      //商品的参数（数组），包含 动态参数 和 静态属性
         },
         //商品分类参数
         cateobj:{
            type:'',
            pagenum:'',
            pagesize:'',

         },
         fileList:[],        
      }
   },
   mounted() {
    this.query();
   },
   methods: {
    //获取商品分类
       async query(){
            // let rst = await api_save(this.searchobj);
            let rst = await api_categories(this.cateobj);
            let {data,meta}=rst;
            this.options=data;  
        },

      handleClick() {
        this.active=parseInt(this.activeName);
        
      },
       next() {
        if (this.active++ > 2) this.active = 0;
      },
      handleChange() {
       
      },
      handleChangeimg(file, fileList) {
        this.fileList = fileList.slice(-3);
      }
    }
}
</script>
<style>
.com_a{
    text-align: center;
    background-color: rgb(235, 230, 230);
    height: 30px;
    line-height: 30px;
    color: rgb(170, 168, 165);
}
.el-steps{
    margin: 30px auto;
    width: 80%;
    
}
</style>